<template>
  <div class="login">
    <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="star"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
    <div class="login_form">
      <h3>admin</h3>
      <div class="input">
        <el-input placeholder="请输入手机号" v-model.trim="formData.username" @keyup.enter.native="submit">
          <template slot="prepend">手 机 ：</template>
        </el-input>
        <el-input placeholder="请输入密码" v-model.trim="formData.password" type="password" @keyup.enter.native="submit">
          <template slot="prepend">密 码 ：</template>
        </el-input>
      </div>
      <div class="btnWarp">
        <el-button type="success" size="medium" @click="submit(1)" >登录</el-button>
        <el-button type="warning" size="medium" @click="submit(2)" style="margin-left: 20px">注册</el-button>
        <!--<el-button type="success" size="medium" :loading="true" v-else>登录中...</el-button>-->
      </div>
    </div>
  </div>
</template>

<script>
  import cookie from 'js-cookie'
  export default {
    data () {
      return {
        formData: {
          username: '',
          password: ''
        },
        isPost: false,
      }
    },
    methods: {
      submit (type) {
        if (!this.formData.password || !this.formData.username) {
          this.$message({
            message: '请输入完整信息',
            type: 'warning'
          })
          return
        }
        // this.isPost = true
        this.$http.post(type === 2 ? this.$API.user.register : this.$API.user.login, this.formData).then(res => {
          let {data: { data }} = res
          cookie.set('x-token', data.token)
          this.$router.push('/')
        }).catch(err => {
          this.isPost = false
          console.log(err)
        })
      }
  }
}
</script>

<style scoped lang="scss">
  .login {
    height: 100%;
    background-image: url('../static/image/bg.jpg');
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    #particles-js {
      height: 90%;
      box-sizing: border-box;
    }
    .login_form {
      width: 440px;
      height: 320px;
      background-color: #eeedea;
      box-shadow: 6px 6px 12px #523c3c;
      @include absolute-center;
      h3 {
        text-align: center;
      }
      .input {
        width: 80%;
        margin: 0 auto;
      }
      .btnWarp {
        text-align: center;
        margin-top: 20px;
      }
    }
  }
</style>
<style lang="scss">
  .login {
    .el-input-group {
      height: 46px;
      font-size: 16px;
      margin: 14px 0;
      .el-input__inner {
        /*height: 100% !important;*/
        height: 46px;
      }
    }
  }
</style>
